<template>
  <div>
    <!--患者展示用药时间 start-->
    <el-card shadow="never" v-if="isPatient">
      <div class="no-data" v-if="data.length===0">暂无数据</div>
      <el-timeline v-else>
        <el-timeline-item v-for="(item,i) of data" :timestamp="item.useMedicineDay" :key="i" placement="top">
          <el-card>
            <h4 class="line30">{{ item.order.medicineDirection || '用药时间' }}</h4>
            <p class="line30">用药时间：{{ item.useMedicineTime }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <!--患者展示用药时间 end-->


    <!--医生和管理员展示个人中心页面 start-->
    <User v-else></User>
    <!--医生和管理员展示个人中心页面 end-->

  </div>
</template>

<script>
import {computed, defineComponent, ref, watch} from "vue"
import {useStore} from "vuex";
import {RoleTypes} from "../hooks/user/useUserLogin";
import User from "./User.vue";
import Orders from "../api/modules/Orders";
import dayjs from "dayjs";

export default defineComponent({
  name: "Dashboard",
  components: {
    User,
  },
  setup() {
    const store = useStore();
    const role = computed(() => store.state.user.role); // 当前登录角色
    const isPatient = computed(() => role.value === RoleTypes.patient); // 当前登录者是否为患者
    const data = ref([]); // 患者当日用药提醒

    // 查询患者当日用药提醒
    watch(() => store.state.user.userInfo, (val) => {
      Orders.times(val.id).then(res => {
        data.value = (res.data || []).map(item => {
          // 时间格式化
          item.useMedicineDay = dayjs(item.useMedicineTime).format("YYYY-MM-DD")
          item.useMedicineTime = dayjs(item.useMedicineTime).format("YYYY-MM-DD HH:mm:ss")
          return item;
        });
        console.log(res.data)
      }).catch(console.log)
    }, {immediate: true})

    return {
      isPatient,
      data,
    }
  }
})
</script>

<style lang="scss" scoped>
.article-box {
  padding: 20px 40px;
  writing-mode: tb-rl;

  .title {
    line-height: 60px;
    font-size: 22px;
  }

  .item {
    font-size: 16px;
    line-height: 30px;
    color: #666666;
  }
}
</style>
